<template>
  <el-dialog
    :title="title"
    :visible.sync="$attrs.visable"
    width="560px"
    :before-close="handleClose"
    append-to-body
  >
    <div class="text-editor">
      <div class="editorheader flexbetween">
        <el-popover
          class="popper-box"
          :visible-arrow="false"
          placement="bottom"
          width="370"
          trigger="click"
        >
          <div class="emojibox flex flexwrap">
            <a v-for="(icon, eIndex) in emoji"
              :key="eIndex"
              class="iconbox flexcenter"
              @click="chooseEmoji(icon)"
            >
              <img :src="icon.icon" alt />
            </a>
          </div>
          <div
            slot="reference"
            style="text-align: center; cursor: pointer"
          >
            <img src="@/assets/images/emoj.png" alt="" class="editicon" />
          </div>
        </el-popover>
        <!-- <img src="@/assets/images/emoj.png" alt="" class="editicon" /> -->
        <div class="c_primary f-14 commhover" @click="handleCopy">复制</div>
      </div>
      <div class="pt-12">
        <el-input
          v-model="text"
          id="messageInput"
          type="textarea"
          rows="10"
          class="w_full noborderinput"
          placeholder="请输入文字"
        />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { emoji } from "@/assets/icons/emoji.js";
export default {
  data() {
    return {
      loading: false,
      tableList: [],
      text: "",
      emoji: emoji, //表情包
    };
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    selectItem:{
      type:Object,
      default:null
    },
    selectIndex:{
      default:''
    },
  },
  created(){
    if(this.selectItem){
      this.text = this.selectItem?.contentJson
    }
  },
  methods: {
    handleClose() {
      this.$emit("close",1); //关闭弹窗;
    },

    handleCopy(){
      this.copy(this.text)
    },

    //选择表情包
    chooseEmoji(icon){
        var elInput=document.getElementById("messageInput");
        var startPos=elInput.selectionStart;
        var endPos=elInput.selectionEnd;
        var text=elInput.value;
        if(startPos ===undefined ||endPos ===undefined){
            return;
        }
        var result=text.substring(0,startPos) + icon.name + text.substring(endPos);
        //重新定义光标位置
        elInput.focus();
        elInput.selectionStart=startPos+icon.name.length;
        elInput.selectionEnd=startPos +icon.name.length;
        elInput.value=result;
        this.text=result;
    },

    handleSubmit(){
      if(!this.text){
        this.$message.warning('输入不能为空')
        return
      }
      if(this.selectItem){
        // 编辑
        this.$emit('submit',{type:1, message:this.text, index: this.selectIndex})
      }else{
        // 添加
        this.$emit('submit',{type:1, message:this.text})
      } 
    },
  },
};
</script>
<style lang="scss" scoped>
.text-editor {
  position: relative;
  border: 1px solid #e9e9e9;
  border-radius: 2px;
}
.editorheader {
  padding: 8px 18px;
  border-bottom: 1px solid #e9e9e9;
  background: #f9f9f9;
}
.editicon {
  width: 24px;
  height: 24px;
}
.emojibox {
  width: 100%;
  height: 366px;
  padding: 10px;
  overflow-y: scroll;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-top: -15px;
  margin-left: -15px;
}
.iconbox {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  margin: 1px;
  border-radius: 4px;
  &:hover {
    background-color: #eee;
  }
  img {
    width: 28px;
    height: 28px;
  }
}
</style>